<template>
  <div class="index">
    <van-nav-bar title="修改密码" left-text="返回" left-arrow @click-left="onClickLeft" border />
    <van-form @submit="onSubmit">
      <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写身份证号' }]" />
      <van-field v-model="name" name="姓名" label="姓名" placeholder="姓名" :rules="[{ required: true, message: '请填写姓名' }]" />
      <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">点击修改</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'vant'
import { NavBar } from 'vant'

export default {
  name: 'changeLogin',
  data() {
    return {
      username: '',
      name: '',
      password: ''
    }
  },
  methods: {
    onSubmit() {
      axios({
        method: 'post',
        //修改
        url: this.baseURL + '/api/api/changeLogin',
        data: {
          username: this.username,
          name: this.name,
          password: this.password
        }
      }).then((response) => {
        // console.log(response)
        if (response.data.code == 0) {
          Toast(response.data.msg)
        }
        if (response.data.code == 1) {
          Toast(response.data.msg)
          this.$router.push('/')
        }
      })
    },
    onClickLeft() {
      this.$router.push('/')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.changeLogin {
  display: flex;
  color: blue;
  flex-direction: row-reverse;
  margin-right: 20px;
}
</style>
